postcss

What is postcss?

PostCSS is a tool for transforming CSS with JavaScript plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

What are postcss's main functionalities?

Autoprefixing

Automatically adds vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.

postcss([ require('autoprefixer') ]).process(css).then(result => { result.warnings().forEach(warn => { console.warn(warn.toString()); }); console.log(result.css); });

CSS Variables

Transforms CSS Custom Properties (CSS variables) syntax into a static representation that can be understood by browsers that do not support this feature.

postcss([ require('postcss-custom-properties') ]).process(css).then(result => { console.log(result.css); });

CSS Nesting

Allows you to nest one style rule inside another, following the CSS Nesting Module Level 3 specification.

postcss([ require('postcss-nesting') ]).process(css).then(result => { console.log(result.css); });

Minification

A modular minifier, built on top of the PostCSS ecosystem. It is used to minimize CSS for better performance.

postcss([ require('cssnano') ]).process(css).then(result => { console.log(result.css); });

Future CSS Syntax

Allows you to use future CSS features today. It polyfills CSS features that are not yet fully supported in browsers.

postcss([ require('postcss-preset-env') ]).process(css).then(result => { console.log(result.css); });

Other packages similar to postcss

sass

Sass is a mature, stable, and powerful professional grade CSS extension language. It provides mechanisms such as variables, nesting, and mixins, which are not present in standard CSS. Unlike PostCSS, which uses JavaScript plugins, Sass has its own syntax and compiles to standard CSS.

less

Less is a backward-compatible language extension for CSS. It also allows variables, mixins, functions and many other techniques that allow you to make CSS more maintainable and extendable. Less is similar to Sass and differs from PostCSS in that it offers a different syntax and set of features.

stylus

Stylus is a preprocessor that serves as a more robust and feature-rich alternative to CSS. It supports both an indented syntax and regular CSS style. Stylus provides significant flexibility and feature parity with Sass and Less but with a different syntax and feature set compared to PostCSS.

README

PostCSS

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and JetBrains. The Autoprefixer and Stylelint PostCSS plugins is one of the most popular CSS tools.

---

  Made at Evil Martians, product consulting for developer tools.

---

Docs

Read full docs here.